<template>
  <div
    :class="`vavle1 ${props.value === 1 ? 'is_on' : 'is_off'}`"
    :style="{
      top: props.top + 'px',
      left: props.left + 'px',
      fontSize: props.fontSize + 'px',
      width: props.blockSize + 'px',
      height: props.blockSize + 'px',
    }"
  >
    <span class="text"> M </span>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  name: "Vavle1",
});
</script>
<script setup>
const props = defineProps({
  value: {
    default: 0,
  },
  top: {
    default: 0,
  },
  left: {
    default: 0,
  },
  fontSize: {
    default: 14,
  },
  blockSize: {
    default: 18,
  },
});
</script>

<style lang="scss" scoped>
.vavle1 {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  .text {
    position: relative;
  }
}

.vavle1.is_off {
  background-color: #ff0b0f;
  color: white;
}

.vavle1.is_on {
  background-color: #03fc02;
  color: #051427;
}
</style>
